<!--  -->
<template>
<view>
   <view class="goods_list" >
      
      <view v-for="item in goodList"  class="goods_item" 
       @tap="godetail" :key="item" :data-item="item">
        <view class="img"><image lazy-load="true" mode="widthFix" :src="item.itempic"/></view>
        <view class="title">{{item.itemshorttitle}}</view>
        <view class="info"><text>原价:￥{{item.itemprice}}</text><text>销量{{item.itemsale}}</text></view>
        <view class="coupon"><div class="coupon-left">{{item.couponmoney}}元券</div><div>券后价:￥{{item.itemendprice}} </div></view>
      </view>
     
    </view>
     <view class="tips1">
        <view v-if="hasMore">
        	<div class="loader-inner ball-pulse">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </view>
        <view class="no-more" v-else><text >没有更多内容了</text></view>
      </view>
      </view>
</template>

<script>
import network from '@/utils/network.js'

export default {
  data () {
    return {
      goodList: [],
      options: {},
      hasMore: true
    }
  },
  props: {
    // 默认查询参数
    param: {
      type: Object,
      default: {
        url: '/api/supergooditem/list',
        q: {
          nav: '3',
          min_id: ''
        }
      }
    }
  },

  methods: {
    loadmore () {
      this.loadGood()
    },
    godetail (res) {
      let i = res.currentTarget.dataset.item
      wx.navigateTo({
        url: `../goodDetail/goodDetail?id=${i.itemid}&itemtitle=${i.itemtitle}&itemdesc=${i.itemdesc}&itemprice=${i.itemprice}&itemsale=${i.itemsale}&couponmoney=${i.couponmoney}&itemendprice=${i.itemendprice}`
      })
    },
    loadGood () {
      network
      .POST(this.options)
      .then(d => {
        if (this.param.q.min_id === 0) {
          this.goodList = []
        }
        if (d.data.code === 1) {
          this.param.q.min_id = d.data.min_id
          this.goodList = this.goodList.concat(d.data.data)
        } else {
          this.hasMore = false
        }
      })
    }
  },
  onLoad () {
    this.options = {
      url: this.param.url,
      data: this.param.q
    }
    this.loadGood()
  }

}

</script>
<style lang="less">
page{
  margin: 0;
  padding: 0;
}
 .tips1{
  padding:20rpx 0;
  background-color:#eeeeee;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: space-around;
  .no-more{
      width:100%;
      height:20px;
      background-color:#f2f2f2;
      text-align:center;
      color:#000;
      font-size:12px;
      line-height:20px;
      position:relative;
      text{
        z-index:2;
        position: relative;
        background-color:#f2f2f2;
        padding:0 10px;
      }
  }
  .no-more:after {
    content:"";
    width:100%;
    height:1px;
    background-image:linear-gradient(to top,hsla(0,0%,100%,.1),hsla(0,0%,0%,.1));
    position:absolute;
    bottom:50%;
    z-index:1;
    left:0;
  }
}
.goods_list {
  font-size: 26rpx;
  background-color: #eeeeee;
  display: flex;
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  .goods_item {
    background-color: #f9f9f9;
    width: 370rpx;
    height: 510rpx;
    margin: 3rpx 2rpx 3rpx 2rpx;
    .img{
      margin: 0 auto;
      width: 100%;
      height: 367rpx;
      display: flex;
      align-items: center;
      padding:0 2rpx;
      image{
        width: 100%;
        height: 100%!important;
      }
    }
    .title {
      box-sizing: border-box;
      padding: 0 16rpx;
      margin-top: 8rpx;
      font-size: 27rpx;
      width: 100%;
      white-space: nowrap;
      margin-bottom: 7rpx;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .info{
      padding: 0 16rpx;
      display: flex;
      justify-content: space-between;
      color: #696969;
      margin-bottom: 8rpx;
    }
  
    .coupon{
      padding: 0 16rpx;
      font-size: 27rpx;
      display: flex;
      justify-content: space-between;
      .coupon-left{
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 15rpx;
        color: white;
        height: 40rpx;
        line-height: 40rpx;
        background: linear-gradient(to right,#ff7240,#ef291c);
      }
      .coupon-left::before{
          position: absolute;
          top: 10rpx;
          left: -10rpx;
          width: 20rpx;
          height: 20rpx;
          content: "";
          background: #fff;
          border-radius: 20rpx;
        }
        .coupon-left::after{
          position: absolute;
          top: 10rpx;
          right: -10rpx;
          width: 20rpx;
          height: 20rpx;
          content: "";
          background: #fff;
          border-radius: 20rpx;
        }
      div:last-child{
        color: #df473c;
      }
    }
  }
}
</style>